<template>
	<page-meta :page-style="'overflow:'+(show1?'hidden':'visible')"></page-meta>
	<view class="flex flex-direction content">
		<!-- <baseNavbarHome /> -->
		<amap :markers="markers" :latitude="scenicSpot.lat" :longitude="scenicSpot.lng" :scale="scale"
			:polyline="polyline" @onMarkertap="onMarkertap">
		</amap>
		<view v-show="isBubble" @tap="jumpFineFood(scenicSpot)" class="scenic-area text-center">
			<image v-if="scenicSpot.photos && scenicSpot.photos.length > 0" :src="scenicSpot.photos[0].url"
				mode="aspectFill"></image>
			<view class="describe margin_l_r15 flex justify-between align-center">
				<view class="color_fff text-left">
					<view class="fontS28">{{scenicSpot.gpt_source_name}}</view>
					<view class="fontS20 text-beyond-multi1">{{scenicSpot.official_source_name}}</view>
				</view>
				<view class="score-num">{{scenicSpot.rating}}</view>
			</view>
		</view>
		<u-popup :show="show" :round="20" bgColor="transparent" :closeOnClickOverlay="true" mode="bottom" :zIndex="1"
			:overlay="false">
			<image class="arc" src="/static/my/bg1.png" mode="" @click="close2"></image>
			<scroll-view class="bg_color_fff" scroll-y :style="{height: scrollHeight}">
				<!-- <slide-popup :minHeight="230" :showLine="true" @swipeClick="swipeClick"> -->
				<view class="box">
					<view class="dyh" v-if="city && city.weather">
						<image src="/static/image/icon/lng_icon.png" mode="" class="dw"></image>
						<view class="address">中国 · {{ city.pname }} · {{ city.alias }}</view>
						<template v-if="city.weather.indexOf('多云') != -1">
							<image class="width_40 height_40" src="/static/image/icon/cloudy.png" mode=""
								style="margin-left: 24rpx;">
							</image>
						</template>
						<template v-if="city.weather.indexOf('晴') != -1">
							<image class="width_40 height_40" src="/static/image/icon/clear.png" mode=""
								style="margin-left: 24rpx;">
							</image>
						</template>
						<template
							v-if="city.weather.indexOf('小雨') != -1 || city.weather.indexOf('中雨') != -1 || city.weather.indexOf('大雨') != -1|| city.weather.indexOf('暴雨') != -1">
							<image class="width_40 height_40" src="/static/image/icon/rain.png" mode=""
								style="margin-left: 24rpx;">
							</image>
						</template>
						<template v-if="city.weather.indexOf('阵雨') != -1">
							<image class="width_40 height_40" src="/static/image/icon/thundershower.png" mode=""
								style="margin-left: 24rpx;">
							</image>
						</template>
						<template v-if="city.weather.indexOf('雪') != -1">
							<image class="width_40 height_40" src="/static/image/icon/snow.png" mode="">
							</image>
						</template>
						<template v-if="city.weather.indexOf('阴') != -1">
							<image class="width_40 height_40" src="/static/image/icon/yin.png" mode=""
								style="margin-left: 24rpx;">
							</image>
						</template>
						<view class="weatherText">{{ city.weather }} {{ city.temperature }}˚C</view>
					</view>
					<template v-if="detail.user">
						<view class="deh">
							<view class="deh-box">
								<image :src="detail.user.userProfileImg" mode="" class="deh-left"
									@click="goPerson(detail.user.uuid)">
								</image>
								<view class="deh-right">
									<view class="name">{{ detail.user.username }}</view>
									<view class="time">{{ timestampToTime(detail.plan.createTime) }}</view>
								</view>
							</view>
							<template v-if="userInfo && detail.user.uuid != userInfo.user.uuid">
								<view class="but" v-if="isShow == false" @click="active">
									<u-icon name="plus" :bold="true" color="rgba(229, 114, 95, 1)" size="14"></u-icon>
									<text class="gz">关注</text>
								</view>
								<view v-else @click="payClose = true" class="but1">
									<text class="gz1">取消关注</text>
								</view>
							</template>
						</view>
						<view class="dsanh">{{ detail.plan.title }}</view>
						<u-swiper :list="detail.plan.images" imgMode="aspectFill" :indicator="true" indicatorMode="dot"
							height="468rpx" autoplay>
						</u-swiper>
						<scroll-view class="plan-content fontS28 color_222222" scroll-y>
							<u-parse @linktap="richTextOperate" selectable :content="detail.plan.plan">
							</u-parse>
						</scroll-view>
						<view style="width: 100%;height: 50rpx;"></view>
					</template>
					<view style="width: 100%;height: 100rpx;"></view>
				</view>
			</scroll-view>
			<!-- </slide-popup> -->
		</u-popup>

		<!-- 弹窗 -->
		<u-popup :show="payClose" @close="payClose = false" bgColor="transparent" mode="center" :overlay="false">
			<view class="poput-box fontS28 padding_l_r40">
				<view class="bold color_222222 text-center mar_top60">确认不再关注？</view>
				<view class="flex justify-between align-center mar_top60 mar_bottom30">
					<view @click="payClose = false"
						class="point-out border color-46CA28 flex justify-center align-center ">取消</view>
					<view @click="cancel" class="point-out bg_color_E5725F color_fff flex justify-center align-center">
						确定</view>
				</view>
			</view>
		</u-popup>

		<template v-if="detail.plan">
			<u-tabbar :value="values" :fixed="true" :zIndex="1000000" :placeholder="true" :safeAreaInsetBottom="true">
				<view @tap="changeTabber" class="text-center">
					<image src="/static/image/icon/comment.png" class="icons"></image>
					<view class="text-center fontS28 color_6D6D6D">{{detail.plan.reviews}}</view>
				</view>
				<button open-type="share" @tap="handelLike(detail.plan.planUuid,'share')">
					<view class="text-center">
						<image src="/static/image/icon/share.png" class="icons"></image>
						<view class="text-center fontS28 color_6D6D6D">{{detail.plan.shares}}</view>
					</view>
				</button>
				<view @tap="handelLike(detail.plan.planUuid,detail.userSaved?'unsave':'save')" class="text-center">
					<image :src="`/static/image/icon/collect${detail.userSaved ? '_active' : ''}.png`" class="icons">
					</image>
					<view class="text-center fontS28" :class="[detail.userSaved ? 'color_222222' : 'color_6D6D6D']">
						{{detail.plan.saves}}
					</view>
				</view>
				<view @tap="handelLike(detail.plan.planUuid,detail.userLiked?'unlike':'like')" class="text-center">
					<image :src="`/static/image/icon/like${detail.userLiked ? '_active' : ''}.png`" class="icons">
					</image>
					<view class="text-center fontS28" :class="[detail.userLiked ? 'color_222222' : 'color_6D6D6D']">
						{{detail.plan.likes}}
					</view>
				</view>
			</u-tabbar>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";

	import {
		onReady,
		onLoad,
		onShow,
		onHide,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';

	import baseNavbarHome from '../../components/base-navbar-home.vue';
	import slidePopup from '@/components/slide-popup/slide-popup.vue';
	import amap from "@/components/amap/amap.vue"
	const show = ref(true); // 弹窗
	const show1 = ref(false)
	const values = ref(3)
	const detail = ref({})
	const city = ref()
	const isShow = ref();
	const payClose = ref(false);
	const uuid = ref('')
	const {
		proxy
	} = getCurrentInstance()
	// 展开收起
	const unfoldShow = ref(false);
	// 景区气泡
	const isBubble = ref(false);
	const scrollHeight = ref('1000rpx');

	// 解决uni-app返回页面不触发页面刷新问题
	const ifOnShow = ref(false)
	onHide(() => {
		ifOnShow.value = true
	})

	// 计划id
	const planId = ref();
	// 用户信息
	const userInfo = ref()
	onLoad((option) => {
		planId.value = option.id;
		if (uni.getStorageSync('user_info')) {
			userInfo.value = JSON.parse(uni.getStorageSync('user_info'))
		}
		getDetail();
	})
	onShow(async () => {
		if (ifOnShow.value) {
			getDetail();
		}
	})

	// poi信息
	const pois = ref({});
	// 景点详细
	const scenicSpot = ref({});
	// 地图标记点
	const markers = ref([]);
	// 路线规划图
	const polyline = ref([{
		// 每个点的经纬度
		points: [],
		// 颜色
		color: "#E5725F",
		// 宽度
		width: 10,
		// clickable: true,
		arrowLine: true,
		// colorList: true,
	}])
	// 缩放级别
	const scale = ref(10);

	// 获取计划详情
	const getDetail = async () => {
		const res = await proxy.$api.detail(planId.value)
		foolw(res.data.user.uuid);
		uuid.value = res.data.user.uuid;
		if (res.data.plan.city) {
			const result = await proxy.$api.map(res.data.plan.city)
			city.value = result.data
		}
		pois.value = JSON.parse(res.data.plan.poiInfo)
		markers.value = [];
		Object.keys(pois.value.poi_data).forEach((item, index) => {
			const maks = pois.value.poi_data[item];
			markers.value.push({
				id: maks.id,
				latitude: maks.lat,
				longitude: maks.lng,
				iconImg: JSON.parse(maks.photos)[0].url,
				iconPath: '/static/image/icon/lng_icon.png',
				width: 1,
				height: 1,
				customCallout: {
					anchorY: 0,
					anchorX: 0,
					display: 'ALWAYS'
				}
			})

			polyline.value[0].points.push({
				latitude: maks.lat,
				longitude: maks.lng,
			})

			const reg = `<span style='color: #E5725F;font-weight: bold;'>${item}</span>`;
			const n =
				`<a href="${item}" style="color: #E5725F;font-weight: bold;text-decoration:underline;">${item}</a>`;
			res.data.plan.plan = res.data.plan.plan.replace(reg, n);
		})

		console.log(markers.value, 999)
		detail.value = res.data;
	}

	// 点击富文本地名
	const richTextOperate = (event) => {
		scenicSpot.value = pois.value.poi_data[event.innerText];
		if (typeof(scenicSpot.value.photos) == "string") {
			scenicSpot.value.photos = JSON.parse(scenicSpot.value.photos);
		}
		isBubble.value = true;
		unfoldShow.value = true;
		scrollHeight.value = 330 + 'rpx';
		scale.value = 16;
	}

	// 点击地图标记
	const onMarkertap = (el) => {
		Object.keys(pois.value.poi_data).forEach((item, index) => {
			const maks = pois.value.poi_data[item];
			if (maks.id == el) {
				scenicSpot.value = maks;
			}
		})
		if (typeof(scenicSpot.value.photos) == "string") {
			scenicSpot.value.photos = JSON.parse(scenicSpot.value.photos);
		}
		isBubble.value = true;
		unfoldShow.value = true;
		scrollHeight.value = 330 + 'rpx';
		scale.value = 16;
	}

	// 展开或收起
	const close2 = () => {
		isBubble.value = false;
		unfoldShow.value = !unfoldShow.value;
		if (unfoldShow.value) {
			scrollHeight.value = 330 + 'rpx'
		} else {
			scrollHeight.value = 1000 + 'rpx';
			scale.value = 10;
		}
	}

	// 前往美食
	const jumpFineFood = (el) => {
		uni.navigateTo({
			url: `/tourism-schedule-pages/fine-food/fine-food?info=${JSON.stringify(el)}&planUuid=${planId.value}&type=detail`
		})
	}

	const goToFanList = () => {
		uni.navigateTo({
			url: '/pages/my/fanList'
		})
	}
	// 获取是否关注
	const foolw = async (id) => {
		if (uni.getStorageSync('token')) {
			const res = await proxy.$api.fool(id)
			isShow.value = res.data
		} else {
			isShow.value = false;
		}
	}
	const goPerson = (uuid) => {
		uni.navigateTo({
			url: `/pages/my/contactHomePage?id=${uuid}`
		})
	}
	const active = async () => {
		if (uni.getStorageSync('token')) {
			const res = await proxy.$api.fool1({
				followingUuid: uuid.value
			})
			if (res.code == "10000") {
				uni.showToast({
					title: "关注成功",
					duration: 1200,
				})
				setTimeout(() => {
					foolw(uuid.value)
				}, 800)
			}
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}

	const cancel = async () => {
		const res = await proxy.$api.fool2({
			followingUuid: uuid.value
		})
		if (res.code == "10000") {
			payClose.value = false;
			foolw(uuid.value)
		}
	}
	const timestampToTime = (timestamp) => {
		var date = new Date(timestamp);
		var Y = date.getFullYear() + "/";
		var M =
			(date.getMonth() + 1 < 10 ?
				"0" + (date.getMonth() + 1) :
				date.getMonth() + 1) + "/";
		var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
		return Y + M + D
	}


	// 点赞-收藏-转发
	const handelLike = (id, type) => {
		if (uni.getStorageSync('token')) {
			proxy.$api.collect(id, {
				action: type
			}).then(res => {
				if (res.code === "10000") {
					getDetail()
				}
			})
		} else if (type != 'share') {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	}

	const changeTabber = (i) => {
		if (uni.getStorageSync('token')) {
			uni.navigateTo({
				url: `/pages/comment-list/comment-list?id=${detail.value.plan.planUuid}`
			})
		} else {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	}

	// 分享好友
	onShareAppMessage(async (res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
		}
		return {
			title: detail.value.plan.title ? detail.value.plan.title : '荔知游',
			path: `/pages/index/details?id=${planId.value}`,
			imageUrl: detail.value.plan.images[0]
		}
	})
	// 分享朋友圈
	onShareTimeline(async (res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
		}
		return {
			title: detail.value.plan.title ? detail.value.plan.title : '荔知游',
			path: `/pages/index/details?id=${planId.value}`,
			imageUrl: detail.value.plan.images[0]
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		overflow-y: auto;
		z-index: -2;
	}

	.scenic-area {
		width: 280rpx;
		height: 320rpx;
		border-radius: 16rpx;
		border: 1rpx solid #FF583A;
		position: absolute;
		left: 50%;
		top: 21%;
		transform: translate(-50%, -50%);

		image {
			width: inherit;
			height: inherit;
			border-radius: inherit;
			position: relative;
		}

		.describe {
			width: 260rpx;
			position: absolute;
			bottom: 0;

			.score-num {
				font-size: 56rpx;
				font-weight: bold;
				color: #FF583A;
			}
		}
	}

	:deep(.u-tabbar__content__item-wrapper) {
		margin-top: 20rpx;
	}

	button {
		line-height: 1.2;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	.plan-content {
		height: 500rpx;
		padding: 20rpx;
		box-sizing: border-box;
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
	}


	.arc {
		width: 100%;
		height: 162rpx;
		/* position: absolute; */
		backdrop-filter: blur(2px);
	}

	.map {
		flex: 1;
	}

	.box {
		height: inherit;
		overflow-y: auto;
	}

	.dyh {
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	:deep(.u-popup__content) {
		height: 100rpx !important;

	}

	.dw {
		width: 32rpx;
		height: 32rpx;
	}

	.address {
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 20rpx;
		color: #6D6D6D
	}

	.weather {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.weatherText {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 16rpx;
		color: #6D6D6D
	}

	.deh {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		height: 96rpx;
		margin-top: 50rpx;
	}

	.deh-box {
		display: flex;
		align-items: center;
	}

	.deh-left {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.deh-right {
		height: 86rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name {
		font-size: 32rpx;
	}

	.time {
		font-size: 28rpx;
		color: #6D6D6D;
	}

	.but {
		width: 133rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border: 2rpx solid rgba(229, 114, 95, 1);
		border-radius: 32rpx;
		padding: 0 9rpx;
		box-sizing: border-box;
	}

	.but1 {
		min-width: 133rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border: 2rpx solid #6D6D6D;
		border-radius: 32rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.gz {
		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(229, 114, 95, 1);
		margin-left: 10rpx;
	}

	.gz1 {
		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: 500;
		color: #6D6D6D;
		margin-left: 10rpx;
	}

	.dsanh {
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: 500;
		padding: 0 24rpx;
		margin-top: 40rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		height: 480rpx;
		margin-top: 16rpx;
		margin-bottom: 24rpx;
	}

	.dsh {
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		margin-top: 32rpx;
	}

	.title {
		line-height: 48rpx;
	}

	.text {
		margin: 20rpx 0;
		line-height: 48rpx;
		font-size: 28rpx;
	}

	.icons {
		width: 40rpx;
		height: 40rpx;
	}

	.border {
		border: 2rpx solid #6D6D6D;
	}

	.poput-box {
		width: 474rpx;
		min-height: 242rpx;
		background: #FFFFFF;
		box-shadow: 0 16rpx 40rpx 0 rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;

		.point-out {
			width: 160rpx;
			height: 56rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>